<template>
	<div class="layout-padding">
		<div class="layout-padding-auto layout-padding-view">
			<el-form ref="formRef" :model="dynamicValidateForm" label-width="auto" class="demo-dynamic">
				<el-form-item>
					<!-- <el-button type="primary" @click="submitForm(formRef)">Submit</el-button> -->
					<el-button type="primary" @click="addDomain">添加</el-button>
					<!-- <el-button @click="resetForm(formRef)">Reset</el-button> -->
				</el-form-item>
				<div v-for="(domain, index) in dynamicValidateForm.domains" class="domains">
					<div class="domainsForm">
						<el-form-item
							:key="domain.key"
							:label="'API提供商'"
							:prop="'domains.' + index + '.value'"
							:rules="{
								required: true,
								message: '输入API提供商',
								trigger: 'blur',
							}"
						>
							<el-input v-model="domain.value" />
						</el-form-item>
						<el-form-item
							:key="domain.key"
							:label="'调用连接'"
							:prop="'domains.' + index + '.value'"
							:rules="{
								required: true,
								message: '输入调用连接',
								trigger: 'blur',
							}"
						>
							<el-input v-model="domain.value" />
						</el-form-item>
						<el-form-item
							:key="domain.key"
							label=" "
							:prop="'domains.' + index + '.value'"
							:rules="{
								required: true,
								message: '选择API属性',
								trigger: 'blur',
							}"
						>
							<el-select v-model="value" placeholder="Select" style="width: 240px">
								<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
							</el-select>
						</el-form-item>
					</div>
					<div>
						<el-button class="mt-2" @click.prevent="removeDomain(domain)" type="primary"> 启用 </el-button>
						<el-button class="mt-2" @click.prevent="removeDomain(domain)" type="warning"> 停用 </el-button>
						<el-button class="mt-2" @click.prevent="removeDomain(domain)" type="danger"> 删除 </el-button>
					</div>
				</div>
			</el-form>
		</div>
	</div>
</template>
<script>
export default {
	name: 'Online',
	data() {
		return {
			dynamicValidateForm: {
				domains: [
					{
						key: 1,
						value: '',
					},
				],
			},
			value: 'Option1',
			options: [
				{
					value: 'Option1',
					label: '付费',
				},
				{
					value: 'Option2',
					label: '免费',
				},
				{
					value: 'Option3',
					label: 'PCS',
				},
			],
			email: '',
		};
	},
	created() {},
	methods: {
		addDomain() {
			this.dynamicValidateForm.domains.push({
				key: Date.now(),
				value: '',
			});
		},
		removeDomain(item) {
			let index = this.dynamicValidateForm.domains.indexOf(item);
			if (index !== -1) {
				this.dynamicValidateForm.domains.splice(index, 1);
			}
		},
	},
};
</script>
<style lang="scss" scoped>
.domains {
	display: flex;
	border: 1px solid #e3e3e3;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	padding: 15px;
	margin-bottom: 10px;
	.domainsForm {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.el-form-item--default {
		margin-bottom: 0;
	}
}
</style>
